<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/userInfo'

const userStore = useUserStore()
const orderApi = uniCloud.importObject('order')

// 防抖函数
const showToastDebounced = (() => {
    let timer = null
    return (options) => {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            uni.showToast(options)
        }, 300)
    }
})()

// 统计数据
const statistics = ref({
    totalOrders: 0,        // 总订单数
    totalAmount: 0,        // 总金额
    waitPay: {            // 待付款
        count: 0,
        amount: 0
    },
    waitSend: {           // 待发货
        count: 0,
        amount: 0
    },
    waitReceive: {        // 待收货
        count: 0,
        amount: 0
    },
    completed: {          // 已完成
        count: 0,
        amount: 0
    }
})

// 获取统计数据
const getStatistics = async () => {
    try {
        const result = await orderApi.getOrderList(userStore.userInfo.uid, 0)
        if (result.errCode === 0) {
            // 重置统计数据
            statistics.value.totalOrders = result.data.length
            statistics.value.totalAmount = 0
            statistics.value.waitPay = { count: 0, amount: 0 }
            statistics.value.waitSend = { count: 0, amount: 0 }
            statistics.value.waitReceive = { count: 0, amount: 0 }
            statistics.value.completed = { count: 0, amount: 0 }

            // 统计各状态订单
            result.data.forEach(order => {
                // 累加总金额
                statistics.value.totalAmount += Number(order.tatalPrice || 0)

                // 根据状态统计
                switch (order.state) {
                    case 1: // 待付款
                        statistics.value.waitPay.count++
                        statistics.value.waitPay.amount += Number(order.tatalPrice || 0)
                        break
                    case 2: // 待发货
                        statistics.value.waitSend.count++
                        statistics.value.waitSend.amount += Number(order.tatalPrice || 0)
                        break
                    case 3: // 待收货
                        statistics.value.waitReceive.count++
                        statistics.value.waitReceive.amount += Number(order.tatalPrice || 0)
                        break
                    case 4: // 已完成
                        statistics.value.completed.count++
                        statistics.value.completed.amount += Number(order.tatalPrice || 0)
                        break
                }
            })
        }
    } catch (e) {
        showToastDebounced({
            title: '获取统计数据失败',
            icon: 'none'
        })
    }
}

onMounted(() => {
    getStatistics()
})
</script>

<template>
	<view class="order-count">
		<!-- 总体统计 -->
		<view class="total-card">
			<view class="title">订单总览</view>
			<view class="content">
				<view class="item">
					<text class="label">总订单数</text>
					<text class="value">{{ statistics.totalOrders }}单</text>
				</view>
				<view class="item">
					<text class="label">总金额</text>
					<text class="value price">¥{{ statistics.totalAmount.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 状态统计 -->
		<view class="status-cards">
			<!-- 待付款 -->
			<view class="card wait-pay">
				<view class="title">待付款</view>
				<view class="content">
					<view class="count">{{ statistics.waitPay.count }}单</view>
					<view class="amount">¥{{ statistics.waitPay.amount.toFixed(2) }}</view>
				</view>
			</view>

			<!-- 待发货 -->
			<view class="card wait-send">
				<view class="title">待发货</view>
				<view class="content">
					<view class="count">{{ statistics.waitSend.count }}单</view>
					<view class="amount">¥{{ statistics.waitSend.amount.toFixed(2) }}</view>
				</view>
			</view>

			<!-- 待收货 -->
			<view class="card wait-receive">
				<view class="title">待收货</view>
				<view class="content">
					<view class="count">{{ statistics.waitReceive.count }}单</view>
					<view class="amount">¥{{ statistics.waitReceive.amount.toFixed(2) }}</view>
				</view>
			</view>

			<!-- 已完成 -->
			<view class="card completed">
				<view class="title">已完成</view>
				<view class="content">
					<view class="count">{{ statistics.completed.count }}单</view>
					<view class="amount">¥{{ statistics.completed.amount.toFixed(2) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.order-count {
	min-height: 100vh;
	padding: 24rpx;
	background-color: $page-bg-color;

	.total-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;

		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: $text-font-color-1;
			margin-bottom: 24rpx;
		}

		.content {
			display: flex;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.label {
					font-size: 24rpx;
					color: $text-font-color-2;
					margin-bottom: 8rpx;
				}

				.value {
					font-size: 32rpx;
					font-weight: 600;
					color: $text-font-color-1;

					&.price {
						color: #ff4d4f;
					}
				}
			}
		}
	}

	.status-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;

		.card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;

			.title {
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}

			.content {
				.count {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 8rpx;
				}

				.amount {
					font-size: 24rpx;
					color: $text-font-color-2;
				}
			}

			&.wait-pay {
				.title { color: #ff4d4f; }
				.count { color: #ff4d4f; }
			}

			&.wait-send {
				.title { color: #faad14; }
				.count { color: #faad14; }
			}

			&.wait-receive {
				.title { color: #1890ff; }
				.count { color: #1890ff; }
			}

			&.completed {
				.title { color: #52c41a; }
				.count { color: #52c41a; }
			}
		}
	}
}
</style>